<template>
  <el-row :gutter="10" type="flex" justify="center" class="p-3">
    <el-col :span="11" style="flex:none">
      <fieldset class="mb-2">
        <legend class="w70">未辖设备</legend>
        <div>
          <div class="ur-form bg-transparent mb-1">
            <el-input placeholder="输入搜索内容"  class="input-with-select w250 "  size="small" v-model="without">
              <el-button slot="append"  class="ur-btn ur-btn-primary" @click="GetUnGroupRtu"> <i class="iconfont icon-search"></i>查询</el-button>
            </el-input>
          </div>
          <el-table  height="350" :data="tableData1" @selection-change="handleSelection">
            <el-table-column type="selection" align="center" width="40"></el-table-column>
            <el-table-column prop="No" label="RTU编号" align="center"></el-table-column>
            <el-table-column prop="DevAddr" label="安装地址" width="170" align="center"></el-table-column>
          </el-table>
        </div>
      </fieldset>
    </el-col>
    <el-col >
      <div class="text-center" style="margin-top: 160px;">
        <el-button class="ur-btn ur-btn-primary" @click="RemoveGroupDevice()">
          <span class="font16"><i class="iconfont icon-lujing"></i>移除</span>
        </el-button>
        <el-button class="ur-btn ur-btn-primary ml-0 mt-3" @click="AddGroupDevice()">
          <span class="font16">
            <i class="iconfont icon-lujing d-inline-block" style="transform: rotate(180deg)"></i>添加
          </span>
        </el-button>
      </div>
    </el-col>
    <el-col :span="11" style="flex:none">
      <fieldset class="mb-2">
        <legend class="w70">已辖设备</legend>
        <div>
          <div class="ur-form bg-transparent mb-1">
            <el-input placeholder="输入搜索内容"  class="input-with-select w250 "  size="small" v-model="within">
              <el-button slot="append"  class="ur-btn ur-btn-primary" @click="GetBoxByGroup"> <i class="iconfont icon-search"></i>查询</el-button>
            </el-input>
          </div>
          <el-table class="w-100" height="350" :data="tableData2" @selection-change="handleSelection1">
            <el-table-column type="selection" align="center" width="40"></el-table-column>
            <el-table-column prop="No" label="RTU编号"  align="center"></el-table-column>
            <el-table-column prop="DevAddr" label="安装地址" align="center" width="170"></el-table-column>
          </el-table>
        </div>
      </fieldset>
    </el-col>
  </el-row>
</template>

<script>
  import {mapState} from 'vuex'
  import api from 'api/api'

  export default {
    components: {},
    props: {
      groupId: {}
    },
    data() {
      return {
        without: '',
        within:'',
        tableData2: [],
        tableData1: [],
        Adddevs: [],
        RemovedevIds: []
      }
    },
    watch: {},
    computed:mapState({
      limits:state=>state.user.userInfo.limits
    }),
    methods: {
      GetUnGroupRtu() {
        this.tableData1=[]
        api.fetchSimple('/Group/GetUnGroupRtu', {groupId:this.groupId,value: this.without}).then(r => {
          this.tableData1=r
        })
      },
      GetBoxByGroup() {
        this.tableData2 = []
        api.fetchSimple('/Group/GetBoxByGroup', {groupId: this.groupId, value: this.within}).then(r => {
          this.tableData2 = r
        })
      },
      handleSelection(val) {
        if (val.length == 0) return
        this.Adddevs = []
        val.map(function (e) {
          this.Adddevs.push({DeviceId: e.Id, BoxId: e.BoxId})
        })
      },
      handleSelection1(val) {
        if (val.length == 0) return
        val.map(function (e) {
          this.RemovedevIds.push(e.Id)
        })
      },
      AddGroupDevice() {
        let self = this;
        if (this.Adddevs.length == 0) {
          return this.$message.warning({showClose:true,message:'未选择添加的设备！'})
        }
        api.fetch('/Group/AddGroupDevice?groupId='+this.groupId,self.Adddevs).then(r => {
          self.GetUnGroupRtu()
          self.GetBoxByGroup()
        })
      },
      RemoveGroupDevice() {
        let self = this;
        if (this.RemovedevIds.length == 0) {
          return this.$message.error({showClose:true,message:'未选择移除的设备！'})
        }
        api.fetchSimple('/Group/RemoveGroupDevice', {groupId: this.groupId, devIds: this.RemovedevIds}).then(r => {
          self.GetUnGroupRtu()
          self.GetBoxByGroup()
        })
      }
    },
    created() {
      // this.GetUnGroupRtu()
      // this.GetBoxByGroup()
    },
    mounted() {
    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus"></style>
